<template>
  <!-- 统计报表-银保通问题清单报表页面 -->
  <div class="fillcontain">
    <!-- 标题 -->
    <div class="fastQuery">
      <el-row>
        <el-col :span="6" class="fastQuery_title">
          <i class="el-icon-tickets"></i><span>银保通银行录入问题件分析报表</span></el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div>
    <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="统计时间" prop="idNo">
                        <el-date-picker
                        v-model="searchParams.beginAndEndDate"
                        type="daterange"
                        value-format="yyyyMMdd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="机构" prop="idNo">
                        <el-select v-model="searchParams.organId" placeholder="" >
                          <el-option key="" label="全部"
                                       value=""></el-option>
                            <el-option v-for="item in ssyMap" :key="item.sbusiorgid" :label="item.sorgname"
                                       :value="item.sbusiorgid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="getList"></el-button>
                    <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
    <div class="contain">
     <!-- 操作按钮 -->
        <el-row class="bgfff pb20"> 
          <el-col :span="24">
              <el-button @click="goExport" type="danger" plain>导出</el-button>
          </el-col>
        </el-row>
       <div class="table_container">
            
            
            <el-table
            
                 v-loading="loading"
                 :data="tableData"
                 highlight-current-row
                 header-cell-class-name="table-header-class"
                :summary-method="getSummaries"
                show-summary
                 
                 style="width:100%">
                <el-table-column
                  prop="currentDate"
                  label="月份"
                  width="150"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.currentDate.slice(4,6)}}</span>
                          </template>
                      </el-table-column>
                </el-table-column>
                <el-table-column
                  prop="returnSum"
                  label="回包件数"
                  width="150"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="银行录入问题件"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      <el-table-column
                        prop="bankSum"
                        label="件数"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        prop="bankRate"
                        label="占比"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{percentage(scope.row.bankRate)}}</span>
                          </template>
                      </el-table-column>
                </el-table-column>
                <el-table-column
                  prop="infoSum"
                  label="信息比对不一致总量"
                  width="150"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="客户信息"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      <el-table-column
                        prop="customerSum"
                        label="数量"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        prop="customerRate"
                        label="占比"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{percentage(scope.row.customerRate)}}</span>
                          </template>
                      </el-table-column>
                </el-table-column>
                <el-table-column label="保险计划"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      <el-table-column
                        prop="insuranceSum"
                        label="数量"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        prop="insuranceRate"
                        label="占比"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{percentage(scope.row.insuranceRate)}}</span>
                          </template>
                      </el-table-column>
                </el-table-column>
                <el-table-column label="授权信息"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      <el-table-column
                        prop="authorizeSum"
                        label="数量"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        prop="authorizeRate"
                        label="占比"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{percentage(scope.row.authorizeRate)}}</span>
                          </template>
                      </el-table-column>
                </el-table-column>
                <el-table-column label="健康告知"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      <el-table-column
                        prop="healthySum"
                        label="数量"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        prop="herlthyRate"
                        label="占比"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{percentage(scope.row.healthySum)}}</span>
                          </template>
                      </el-table-column>
                </el-table-column>
                <el-table-column label="其它"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      <el-table-column
                        prop="otherSum"
                        label="数量"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column
                        prop="otherRate"
                        label="占比"
                        width="120"
                  header-align='center'
                   align='center'
                   show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{percentage(scope.row.otherRate)}}</span>
                          </template>
                      </el-table-column>
                </el-table-column>
              </el-table>
        </div>
    </div>
  </div>
</template>
<script>
  import constant from '@/utils/constant';
    import request from '@/utils/axios';
    import{getBankInputAnalysisList} from '@/api/statis/report/report.js';
    
    import {getSsyOrgMap} from "@/api/taskCenter/taskCommon";
    import {getBeginAndEndOfCurrentMonth} from '@/utils/mUtils'
    import TaskConstants, {
        call,exportData
    } from "@/api/taskManager/common"
   export default {
        data(){
            return {
              expiryDate:'',
              ssyMap:[],
              tableData:[],
              searchParams:{
                  beginAndEndDate:'',
                  organId:''
              },
              total:''
            }
        },
        methods:{
            percentage(param){
              var res=param*100;
              res=res.toString();
              if(res.indexOf('.')==-1){
                  return res+='.00%'
              }
              let arr=res.split('.');
              if(arr[1].length==1){
                  res+='0';
              }
              res+='%'
              return res;
            },
            getSummaries(param) {
                console.log(this.total)
                return this.total;
              },
            getList(){
                this.tableData=[];
                this.total=[];
                console.log(this.searchParams)
                if(this.searchParams.beginAndEndDate==null||this.searchParams.beginAndEndDate.length!=2){
                      this.$message({
                        type: 'error',
                        message: '请选择起止时间'
                      });
                    return;
                }
                if(this.searchParams.beginAndEndDate[1].slice(0,4)-this.searchParams.beginAndEndDate[0].slice(0,4)>=1){
                      this.$message({
                        type: 'error',
                        message: '不支持跨年度查询'
                      });
                    return;
                }
                let params = {
                  beginDate:this.searchParams.beginAndEndDate[0],
                  endDate:this.searchParams.beginAndEndDate[1],
                  organId:this.searchParams.organId
                }
                this.$store.dispatch('loading/CHNAGE_SUBLOADING', true)
                getBankInputAnalysisList(params).then(res => {
                  this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                  if (res.resultCode == constant.SUCCESS && res.data) {
                    var arr=[];
                    res.data.list.map((item,idex)=>{
                        if(item.length>0){
                            arr.push(item[0]);
                        }
                    })
                    this.tableData=arr;
                    this.total=res.data.total;
                    console.log('this.tableData')
                    console.log(this.tableData)
                  }
                }).catch(err => {
                  this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                })
            },
            goExport(){
                var url='/ilmp/task-app/bank/report/inputAnalysis/export?beginDate='+this.searchParams.beginAndEndDate[0]+'&endDate='+this.searchParams.beginAndEndDate[1]+'&organId='+this.searchParams.organId
                var reportCSS = "toolbar=no,status=no,menubar=no,location=no,resizable=yes,";
                    reportCSS+= "directories=no,scrollbars=yes,copyhistory=yesm,width=800,height=600";
                    
//                  url='/ilmp/task-app/bank/report/inputAnalysis/queryData'
               let obj={}
                obj.beginDate=this.searchParams.beginAndEndDate[0];
                obj.endDate=this.searchParams.beginAndEndDate[1];
                obj.organId=this.searchParams.organId;
                let vueObj = this;     
              exportData(vueObj,TaskConstants.apis.inputAnalysis, obj, "post","银保通银行录入问题件分析报表.xls","application/vnd.ms-excel;charset=utf-8");
            },
            resetSearch(){
                this.searchParams.beginAndEndDate=getBeginAndEndOfCurrentMonth();
                this.searchParams.organId='';
            }
        },
        created(){
            this.searchParams.beginAndEndDate=getBeginAndEndOfCurrentMonth();
            getSsyOrgMap().then(data => this.ssyMap = data);
//          this.searchParams.beginAndEndDate=[this.$moment(new Date()).format("YYYYMMDD"),]
        },
        activated(){
            document.onkeydown = (event)=>{
                  var e = event || window.event || arguments.callee.caller.arguments[0];
                  if (e && e.keyCode == 113) {
                      this.getList();
                  }
              };
        }
   }
</script>
<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;
    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e1e1e1;

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }


</style>